<template>
  <div class="hospital">
    <!-- 左侧导航区域 -->
    <div class="menu">
      <div class="top">
        <icon-home />
        <span> / 医院信息</span>
      </div>
      <a-menu
        :default-selected-keys="[initPath]"
        show-collapse-button
        breakpoint="xl"
      >
        <a-menu-item
          key="/hospital/register"
          @click="changeActive('/hospital/register')"
          ><icon-calendar #icon />预约挂号</a-menu-item
        >
        <a-menu-item
          key="/hospital/detail"
          @click="changeActive('/hospital/detail')"
          ><icon-file #icon />医院详情</a-menu-item
        >
        <a-menu-item
          key="/hospital/notice"
          @click="changeActive('/hospital/notice')"
          ><icon-notification #icon />预约通知</a-menu-item
        >
        <a-menu-item
          key="/hospital/close"
          @click="changeActive('/hospital/close')"
          ><icon-exclamation-circle #icon />停诊信息</a-menu-item
        >
        <a-menu-item
          key="/hospital/search"
          @click="changeActive('/hospital/search')"
          ><icon-search #icon />查询/取消</a-menu-item
        >
      </a-menu>
    </div>
    <!-- 右侧内容展示区域：路由组件展示位置 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";
import useDetailStore from "@/store/modules/hospitalDetail";

const detailStore = useDetailStore();

const $router = useRouter();
const $route = useRoute();

const initPath = computed<string>(() => {
  return $route.path;
});

// 左侧菜单栏的点击回调
const changeActive = (path: string) => {
  $router.push({ path, query: { hoscode: $route.query.hoscode } });
};

// 组件挂载完毕时：通知pinia仓库发送请求获取医院详情的数据，存储在pinia仓库中
onMounted(() => {
  detailStore.getHospitalDetail($route.query.hoscode as string);
  detailStore.getHospitalDepartment($route.query.hoscode as string);
});
</script>

<style lang="scss" scoped>
.hospital {
  display: flex;
  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top {
      font-size: 17px;
      color: #7f7f7f;
      display: flex;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 19px;
      span {
        margin-left: 5px;
      }
    }
  }
  .content {
    flex: 8;
  }
}
</style>
